<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/userSeting.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="../index.html">首页</a></li>
                <li><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">在线练习</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容">
                <img src="../img/index/search.png" alt="">
            </div>
            <div class="login" style="display: inline-block;">
                <a href="./pages/loginAndRegister/login.html">登陆</a>
                /
                <a href="./pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" style="display: none;">
                <img src="../img/login/user.png" alt="" class="myIcon">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li><a href="./product.html">订单中心</a></li>
                        <li>资金管理</li>
                        <li><a href="./userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>课程中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"><a href="./course.html">我的课程</a></li>
                        <li class="select">我的练习</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="order">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的订单</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="money">
                        <span>资金管理</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的钱包</li>
                        <li class="select">优惠券</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="center">
                        <span>个人中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select active">账户设置</li>
                        <li class="select">我的消息</li>
                        <li class="select">我的评价</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>个人中心</span>
            </div>
            <div class="title_center">
                <span>学员档案</span>
            </div>
            <div class="content_show">
                <div class="my_icon">
                    <span>头像</span>
                    <a href="javascript:;">
                        <img src="../img/login/user.png" class="myIcon" />
                        <div class="change">
                            更换头像
                            <input type="file" class="btn_file" />
                        </div>
                    </a>
                </div>
                <div class="my_name">
                    <div class="my_name_left">
                        <span>真实姓名</span>
                        <input type="text" name="username" id="realname" placeholder="请输入真实姓名">
                    </div>
                    <div class="my_name_right">
                        <span>账号</span>
                        <input type="text" name="user_name" id="username" disabled>
                    </div>
                </div>
                <div class="my_sex">
                    <div class="my_name_left">
                        <span>学员性别</span>
                        <label><input type="radio" name="sex" id="" value="1"><span>男</span></label>
                        <label><input type="radio" name="sex" id="" value="2"><span>女</span></label>
                        <label><input type="radio" name="sex" id="" value="3"><span>保密</span></label>
                    </div>
                    <div class="my_name_right">
                        <span>生日</span>
                        <!-- <input type="date" name="user_name" id="" value="yyyy-mm-dd"> -->
                        <!-- The specified value "2022" does not conform to the required format, "yyyy-MM-dd". -->
                        <!-- <input type="date" name="user_name" id="" value="2022-08-30"> -->
                        <input type="date" name="user_name" id="date">
                    </div>
                </div>
                <div class="my_phone">
                    <div class="my_name_left">
                        <span>联系方式</span>
                        187****2528
                    </div>
                </div>
                <div class="my_learn">

                    <div class="my_name_right" id="save">
                        保存
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </main>
    <!-- 底部栏 -->
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <!-- 固定导航 -->
    <div class="fix">
        <div class="lesson">
            <img src="../img/index/mylesson.png" alt="">
        </div>
        <div class="test">
            <img src="../img/index/mytest.png" alt="">
        </div>
        <div class="top">
            <img src="../img/index/gotop.png" alt="">
        </div>
    </div>
    <script src="../js/userSeting.js"></script>
</body>

</html>

<script src="../utils/jquery.min.js"></script>
<script src="../utils/ajax.js"></script>
<script src="../utils/utils.js"></script>
<script>


    let authorization = localStorage.getItem("t")



    // 获取用户信息的请求
    getuser()
    async function getuser() {

        if (!authorization) {
            alert("请先登录")
            location.href = "./loginAndRegister/login.html"
        }

        // 发送请求
        let [err, results] = await ajax({
            url: api_url + "/user",
            headers: {
                authorization
            }
        })
        // console.log(err,results);

        // 错误拦截
        if (err) {
            alert("出错了")
            return
        }

        if (results.status !== 200) {
            alert(results.msg)
            location.href = "./loginAndRegister/login.html"
            return
        }


        // 证明已登录：显示头像部分
        $(".user").css("display", "inline-block")
        $(".login").css("display", "none")



        // 头像
        $(".myIcon").attr('src', results.results[0].head_photo_url).css("border-radius", "50%")
        // 真名
        $("#realname").val(results.results[0].realname)
        // 账号
        $("#username").val(results.results[0].username)
        // 性别-----------
        let sex = results.results[0].sex - 1
        $(`label input:eq(${sex})`).prop("checked", true)

        // 生日
        let oDate = new Date(Number(results.results[0].birthdate))
        let y = oDate.getFullYear()
        let m = oDate.getMonth() + 1
        let d = oDate.getDate()

        $("#date").val(`${y}-${utils.zero(m)}-${d}`)


    }




    // 更新用户头像
    // click 
    // mouseover
    // mousemove
    // mousedown
    // mouseup 
    // focus 当聚焦的时候
    // blur 当失焦的时候
    // load 当加载的时候
    // submit 当提交的时候
    // input 当输入的时候
    // change 当改变的时候

    $(".btn_file").on("change",async function(){

        // 1、我们需要有一个表单数据
        let form=new FormData()
        // console.log(form);
        // 往表单里面添加数据
        // form.append("username","zs")
        // form.append("password","123")
        // form.append("touxiang",)


        // 2、获取文件数据
        // console.log(this.files);
        // console.log($(this)[0].files);
        form.append("touxiang",this.files[0])


        // 发送请求
        /* let [err,results]=await ajax({
            type:"post",
            url:api_url+"/uploadhead",
            data: form,
            headers:{
                authorization
            }  

        }) */
        $.ajax({
            type:"post",
            url:api_url+"/uploadhead",
            data: form,
            contentType:false,//3、不设置编码格式 
            processData:false,//不对数据进行处理
            headers:{
                authorization
            } ,
            success(results){
                // console.log(results);
                if(results.status!=200){
                    alert(results.msg)
                    return
                }

                $(".myIcon").attr("src",results.url)
                alert("头像更新成功")
            },
            error(err){
                // console.log(err);
                alert("头像上传出错了")
            }
        })

    })




    // 更新用户信息
    $("#save").on("click", async function () {

        let realname = $("#realname").val()
        // console.log( $("label input:checked").val());

        // ------------------
        let sex = $("label input:checked").val()
        let birthdate = +new Date($("#date").val())


        // 发送请求
        let [err, results] = await ajax({
            type: "put",
            url: api_url + "/user",
            data: {
                realname,
                sex,
                birthdate
            },
            headers: {
                authorization
            }
        })

        // console.log(results);
        if (err) {
            alert("更新信息出错了")
            return
        }
        if (results.status != 200) {
            alert(results.msg)
            return
        }

        alert(results.msg)

    })




</script>